



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/blog/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/atom.xml" />
<link rel="alternate" type="application/json" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/blog/css/app.css?v=0.2.5">

  
  <meta name="keywords" content="少时诵诗书" />


<link rel="canonical" href="https://song-ruipeng.gitee.io/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/">



  <title>
React面试 - 我的日志 |
Yume Shoka = 宋胖子</title>
<meta name="generator" content="Hexo 6.3.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">React面试
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2023-07-25 09:31:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2023-07-25T09:31:00+08:00">2023-07-25</time>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/blog/" rel="start">Yume Shoka</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
        <ul>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gicli9lfebj20zk0m84qp.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipeubcbajj20zk0m8h1h.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipeuibk9fj20zk0m8ay2.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclize41wj20zk0m87gk.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giciukx8a7j20zk0m8aio.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giph4lm9i7j20zk0m84qp.jpg"></li>
        </ul>
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/blog/">首页</a></span><i class="ic i-angle-right"></i>
<span  class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="item" rel="index" title="分类于 我的日志"><span itemprop="name">我的日志</span></a>
<meta itemprop="position" content="1" /></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="https://song-ruipeng.gitee.io/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/blog/images/avatar.jpg">
    <meta itemprop="name" content="宋胖子">
    <meta itemprop="description" content=", 欢迎大家一起交流">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="宋胖子">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <h3 id="1什么是hoc如何修改组件属性props"><a class="markdownIt-Anchor" href="#1什么是hoc如何修改组件属性props">#</a> 1. 什么是 HOC / 如何修改组件属性 props？</h3>
<pre><code>1.props是属性，用于父子组件通信，且props不可修改。
1.1如果对于组件的props不满意，可以使用HOC返回一个新的组件。
1.2HOC高阶组件，它是一个函数，接受组件作为参数，返回一个新的组件,是Hooks出现之前，常见的复用逻辑的手段，如react-redux的connect、router5的withoutRouter，inject等。
</code></pre>
<h3 id="2在函数类组件中如何使用state"><a class="markdownIt-Anchor" href="#2在函数类组件中如何使用state">#</a> 2. 在函数 / 类组件中如何使用 state？</h3>
<ul>
<li>组件内部 state、适合只在本组件内部使用 state，有点就是灵活，随时定义即可用。缺点是难以实现在组件间共享。<br>
函数组件内部 state 可以已使用 useState、useReducer 等。<br>
类组件内部可以使用 this.state 定义，使用 this.setState 修改 state。</li>
<li>组件外部 state，也就是所谓的状态管理库，目前用额比较多的是 Redux，Mobx 等</li>
</ul>
<h3 id="3redux工作原理"><a class="markdownIt-Anchor" href="#3redux工作原理">#</a> 3.Redux 工作原理？</h3>
<p><strong>Redux 基于函数式的变成思想实现，集中式管理状态</strong></p>
<h4 id="三大原则"><a class="markdownIt-Anchor" href="#三大原则">#</a> 三大原则</h4>
<ul>
<li><strong>单一数据源</strong>：整个应用的全局 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。</li>
<li><strong>State 是只读的</strong>：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。</li>
<li><strong>使用纯函数来执行修改</strong>：为了描述 action 如何改变 state tree，你需要编写纯的 reducers，Reducer 接收之前的 state 和 action，并返回<strong>新的 state</strong>。<br>
1.createStore 创建 store 数据状态管理库。<br>
2.reducer 初始化、修改状态函数，定义修改规则。<br>
3.getState 获取状态值 （getter）。<br>
4.dispatch 提交更新 (setter)。<br>
5.subscribe 变更订阅 订阅 state 改变之后要做的事情，一般是组件更新。</li>
</ul>
<h3 id="4redux中间件机制如果不用中间间能不能实现异步"><a class="markdownIt-Anchor" href="#4redux中间件机制如果不用中间间能不能实现异步">#</a> 4.redux 中间件机制，如果不用中间间能不能实现异步？</h3>
<pre><code>答:可以的，middleware只是包装了store的dispatch方法。技术上讲，任何middleware能做的事情，都可能通过手动包装dispatch调用来实现，但是放在同一个地方统一管理会使整个项目的扩展变得容易得多。（加强的是dispatch，使其可以更好的解析action）
</code></pre>
<h3 id="5redux-toolkit"><a class="markdownIt-Anchor" href="#5redux-toolkit">#</a> 5.Redux Toolkit？</h3>
<p><strong>Redux Tookit</strong> 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。注意，RTK 只是封装了一层 Redux 而已。<br>
它包括几个实用程序功能，这些功能可以简化最常见场景下的 Redux 开发，包括配置 store、定义 reducer，不可变的更新逻辑、甚至可以立即创建整个状态的 “切片 slice”，而无需手动编写任何 action creator 或者 action type。它还自带了一些最常用的 Redux 插件，例如用于异步逻辑 Redux Thunk，用于编写选择器 selector 的函数 Reselect ，你都可以立刻使用。</p>
<h3 id="6redux-mobx-recoil解决什么问题说一下分别的设计原理有什么优势各个状态管理库之间的差异"><a class="markdownIt-Anchor" href="#6redux-mobx-recoil解决什么问题说一下分别的设计原理有什么优势各个状态管理库之间的差异">#</a> 6.Redux、MobX、Recoil, 解决什么问题？说一下分别的设计原理？有什么优势？(各个状态管理库之间的差异)</h3>
<p>这三者都是状态管理库，当组件内部状态无法满足需求的时候，比如需要实现组件间的状态共享，此时就可以定义一些外部状态，同时还要保证外部状态更新了，组件也随之更新，状态管理库就是做这件事情的。</p>
<p>注：<strong>下面解释各个仓库特点以及各自优缺点</strong>。<br>
Redux 和 Recoli 都是 Facebook 内部开发的状态管理库，其中 Redux 是 React 核心团队的 Dan 本人开发的。<br>
按照出现时机来说，先后分别为 Redux，Mobx，Recoli，这个基本决定了它们的市场占有率。<br>
<strong>Redux</strong> 基于函数式编程思想实现，集中式管理状态仓库，即一个项目中通常只定义一个 store。<br>
<strong>Mobx</strong> 是响应式状态管理库，实现之初参考了 Vue 的设计思想。与 Redux 不同，MobX 风险分散式管理状态，即可以定义多个 store。其主要实现思路是拦截状态值的 get 与 set 函数，get 时候的把状态值标记可观察变量，set 的时候让组件更新。<br>
Redux、Mobx 本身就是 js 库，如果想要和 React 一起使用，经常需要再使用一个与 React 的绑定库，如果 react-redux。mobx-react 或者 mobx-react-lite。<br>
Recoil 与上面两者不同的是，Recoli 本身就是 React 的状态管理库，不再需要与 React 的绑定库，属于一体机。在 Recoil 中，状态的定义是渐进式和分布式的。<br>
总结一下，Redux 集中管理一个大状态，优点是比较专一，缺点是对于某些场景，比如不需要大量共享状态的时候，就不是特别灵活。而 MobX 和 Recoil 是可以分散式管理状态，因此相对 Redux 来说，状态比较单一来源。Recoil 由于又多了一层 selector，因此又可以渐进式定义状态。因此，就学习成本来说，一般是这样：Redux&lt;MobX&lt;Recoil。<br>
目前国内来看，Redux 的使用率是高于 MobX 的，比如 Umi/DVA 底层就是 Redux。Recoil 到现在一直没发正式版，主要是用在 Facebook 内部比较多。</p>
<h3 id="7比较函数组件与类组件的内部状态"><a class="markdownIt-Anchor" href="#7比较函数组件与类组件的内部状态">#</a> 7. 比较函数组件与类组件的内部状态</h3>
<h4 id="相同点"><a class="markdownIt-Anchor" href="#相同点">#</a> 相同点</h4>
<p>定义组件状态，并且状态更新，组件也要更新。</p>
<h4 id="不同点"><a class="markdownIt-Anchor" href="#不同点">#</a> 不同点</h4>
<h5 id="api不同"><a class="markdownIt-Anchor" href="#api不同">#</a> API 不同:</h5>
<p>类组件:this.state、this.setState<br>
 函数组件:useState、useReducer</p>
<h5 id="存储方式不同"><a class="markdownIt-Anchor" href="#存储方式不同">#</a> 存储方式不同</h5>
<p>类组件的 state 存储在类组件实例与 fiber 上<br>
函数组件的 state 存储在 filber 的 hook 上</p>
<h5 id="更新不同"><a class="markdownIt-Anchor" href="#更新不同">#</a> 更新不同</h5>
<p>setState 的时候，类组件的新得 state 与旧的 state 合并对象，而函数组件是新的 state 覆盖老的 state。并且，在 useState 的 setState 中，新旧 state 相同，则函数组件拒绝更新。</p>
<h5 id="组件中使用状态的时候取值直接来源不同"><a class="markdownIt-Anchor" href="#组件中使用状态的时候取值直接来源不同">#</a> 组件中使用状态的时候，取值直接来源不同</h5>
<p>类组件中使用状态，直接使用 this.state，它的直接来源是<strong>类组件实例</strong>。<br>
注:fiber 与类组件实例上的 state 保持同步。<br>
函数组件中使用状态，直接使用 useState 或者 useReducer 函数返回值数组的第 0 个元素，这个值来自<strong> fiber 上的 hook 对象</strong>。<br>
换句话说，如果想要获取类组件的心的状态值，可以直接访问 this.state。<br>
而如果想要获取函数组件中的一个新的状态值，必须重新执行 useState 或者 useReducer 函数，即必须执行函数组件。</p>

      <div class="tags">
          <a href="/blog/tags/%E5%B0%91%E6%97%B6%E8%AF%B5%E8%AF%97%E4%B9%A6/" rel="tag"><i class="ic i-tag"></i> 少时诵诗书</a>
      </div>
  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2023-08-06 15:14:46" itemprop="dateModified" datetime="2023-08-06T15:14:46+08:00">2023-08-06</time>
  </span>
</div>

      
<div class="reward">
  <button><i class="ic i-heartbeat"></i> 赞赏</button>
  <p>请我喝[茶]~(￣▽￣)~*</p>
  <div id="qr">
      
      <div>
        <img data-src="/blog/images/wechatpay.png" alt="宋胖子 微信支付">
        <p>微信支付</p>
      </div>
      
      <div>
        <img data-src="/blog/images/alipay.png" alt="宋胖子 支付宝">
        <p>支付宝</p>
      </div>
      
      <div>
        <img data-src="/blog/images/paypal.png" alt="宋胖子 贝宝">
        <p>贝宝</p>
      </div>
  </div>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>本文作者： </strong>宋胖子 <i class="ic i-at"><em>@</em></i>宋胖子
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="https://song-ruipeng.gitee.io/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" title="React面试">https://song-ruipeng.gitee.io/blog/2023/07/25/九.React面试/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
      

  <a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" itemprop="url" rel="prev" data-background-image=" https:&#x2F;&#x2F;cancan-wx.oss-cn-hangzhou.aliyuncs.com&#x2F;bg&#x2F;6833939bly1gipeun65urj20zk0m81ii.jpg" title="自测1">
  <span class="type">上一篇</span>
  <span class="category"><i class="ic i-flag"></i> 我的日志</span>
  <h3>自测1</h3>
  </a>

    </div>
    <div class="item right">
      

  <a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" itemprop="url" rel="next" data-background-image=" https:&#x2F;&#x2F;cancan-wx.oss-cn-hangzhou.aliyuncs.com&#x2F;bg&#x2F;6833939bly1gicitspjpbj20zk0m81ky.jpg" title="Supense和异步组件解决首页白屏问题">
  <span class="type">下一篇</span>
  <span class="category"><i class="ic i-flag"></i> 我的日志</span>
  <h3>Supense和异步组件解决首页白屏问题</h3>
  </a>

    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#1%E4%BB%80%E4%B9%88%E6%98%AFhoc%E5%A6%82%E4%BD%95%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7props"><span class="toc-number">1.</span> <span class="toc-text"> 1. 什么是 HOC &#x2F; 如何修改组件属性 props？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2%E5%9C%A8%E5%87%BD%E6%95%B0%E7%B1%BB%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8state"><span class="toc-number">2.</span> <span class="toc-text"> 2. 在函数 &#x2F; 类组件中如何使用 state？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3redux%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86"><span class="toc-number">3.</span> <span class="toc-text"> 3.Redux 工作原理？</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%89%E5%A4%A7%E5%8E%9F%E5%88%99"><span class="toc-number">3.1.</span> <span class="toc-text"> 三大原则</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4redux%E4%B8%AD%E9%97%B4%E4%BB%B6%E6%9C%BA%E5%88%B6%E5%A6%82%E6%9E%9C%E4%B8%8D%E7%94%A8%E4%B8%AD%E9%97%B4%E9%97%B4%E8%83%BD%E4%B8%8D%E8%83%BD%E5%AE%9E%E7%8E%B0%E5%BC%82%E6%AD%A5"><span class="toc-number">4.</span> <span class="toc-text"> 4.redux 中间件机制，如果不用中间间能不能实现异步？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5redux-toolkit"><span class="toc-number">5.</span> <span class="toc-text"> 5.Redux Toolkit？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6redux-mobx-recoil%E8%A7%A3%E5%86%B3%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%E8%AF%B4%E4%B8%80%E4%B8%8B%E5%88%86%E5%88%AB%E7%9A%84%E8%AE%BE%E8%AE%A1%E5%8E%9F%E7%90%86%E6%9C%89%E4%BB%80%E4%B9%88%E4%BC%98%E5%8A%BF%E5%90%84%E4%B8%AA%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%BA%93%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82"><span class="toc-number">6.</span> <span class="toc-text"> 6.Redux、MobX、Recoil, 解决什么问题？说一下分别的设计原理？有什么优势？(各个状态管理库之间的差异)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7%E6%AF%94%E8%BE%83%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6%E4%B8%8E%E7%B1%BB%E7%BB%84%E4%BB%B6%E7%9A%84%E5%86%85%E9%83%A8%E7%8A%B6%E6%80%81"><span class="toc-number">7.</span> <span class="toc-text"> 7. 比较函数组件与类组件的内部状态</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%9B%B8%E5%90%8C%E7%82%B9"><span class="toc-number">7.1.</span> <span class="toc-text"> 相同点</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%8D%E5%90%8C%E7%82%B9"><span class="toc-number">7.2.</span> <span class="toc-text"> 不同点</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#api%E4%B8%8D%E5%90%8C"><span class="toc-number">7.2.1.</span> <span class="toc-text"> API 不同:</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AD%98%E5%82%A8%E6%96%B9%E5%BC%8F%E4%B8%8D%E5%90%8C"><span class="toc-number">7.2.2.</span> <span class="toc-text"> 存储方式不同</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%9B%B4%E6%96%B0%E4%B8%8D%E5%90%8C"><span class="toc-number">7.2.3.</span> <span class="toc-text"> 更新不同</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%8A%B6%E6%80%81%E7%9A%84%E6%97%B6%E5%80%99%E5%8F%96%E5%80%BC%E7%9B%B4%E6%8E%A5%E6%9D%A5%E6%BA%90%E4%B8%8D%E5%90%8C"><span class="toc-number">7.2.4.</span> <span class="toc-text"> 组件中使用状态的时候，取值直接来源不同</span></a></li></ol></li></ol></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
        <ul>
          <li><a href="/blog/2022/08/20/%E4%B9%9D.Vue/" rel="bookmark" title="vue总结">vue总结</a></li><li><a href="/blog/2023/04/18/%E5%8D%81.HTTP/" rel="bookmark" title="HTTP总结">HTTP总结</a></li><li><a href="/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/" rel="bookmark" title="计算机网络基础总结">计算机网络基础总结</a></li><li><a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" rel="bookmark" title="Event Loop">Event Loop</a></li><li><a href="/blog/2023/05/05/%E4%B8%89.Css/" rel="bookmark" title="CSS">CSS</a></li><li><a href="/blog/2023/05/17/%E5%9B%9B.JS/" rel="bookmark" title="JS">JS</a></li><li><a href="/blog/2023/06/12/%E4%BA%94.template/" rel="bookmark" title="Template">Template</a></li><li><a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" rel="bookmark" title="读源码理解Vnode">读源码理解Vnode</a></li><li><a href="/blog/2023/07/18/%E4%B8%83.React/" rel="bookmark" title="React">React</a></li><li><a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" rel="bookmark" title="读《Vuejs设计与实现》总结">读《Vuejs设计与实现》总结</a></li><li class="active"><a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" rel="bookmark" title="React面试">React面试</a></li><li><a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" rel="bookmark" title="自测1">自测1</a></li><li><a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" rel="bookmark" title="Supense和异步组件解决首页白屏问题">Supense和异步组件解决首页白屏问题</a></li>
        </ul>
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="宋胖子"
      data-src="/blog/images/avatar.jpg">
  <p class="name" itemprop="name">宋胖子</p>
  <div class="description" itemprop="description">欢迎大家一起交流</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/blog/archives/">
        <span class="count">13</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item categories">
      <a href="/blog/categories/">
        <span class="count">1</span>
        <span class="name">分类</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/blog/tags/">
        <span class="count">1</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/blog/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>


</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
        <a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a>
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
        <a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a>
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/06/12/%E4%BA%94.template/" title="Template">Template</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/18/%E5%8D%81.HTTP/" title="HTTP总结">HTTP总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" title="Event Loop">Event Loop</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" title="React面试">React面试</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" title="读源码理解Vnode">读源码理解Vnode</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/05/05/%E4%B8%89.Css/" title="CSS">CSS</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/" title="计算机网络基础总结">计算机网络基础总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" title="自测1">自测1</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" title="读《Vuejs设计与实现》总结">读《Vuejs设计与实现》总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2022/08/20/%E4%B9%9D.Vue/" title="vue总结">vue总结</a></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 2010 – 
    <span itemprop="copyrightYear">2023</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">宋胖子 @ Yume Shoka</span>
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2023/07/25/九.React面试/',
    favicon: {
      show: "（●´3｀●）やれやれだぜ",
      hide: "(´Д｀)大変だ！"
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,
    copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/blog/js/app.js?v=0.2.5"></script>




</body>
</html>
